<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>彩色面点</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/reset.css" />
  <script src="js/main.js"></script>
</head>

<body>
  <div class="layout-head">
    <div class="layout-head-img">
      <img src="img/WechatIMG43.jpg" alt="" />
    </div>
    <div class="wrap-title">
      <div class="layout-head-title">
        <div class="title">主题：幸福彩虹面点</div>
        <div class="price">￥488/人</div>
      </div>
      <div class="layout-head-details">
        <p>
          <img src="img/日历.png" alt="" /><span>2018.07.14 周六14:00-16:00</span>
        </p>
        <p>
          <img src="img/图层 21.png" alt="" /><span>上海市 静安区（详细地址付款可见）</span>
        </p>
      </div>
      <div class="layout-head-rules">
        <p>课堂席位：共8位</p>
        <p>课堂时常：2小时</p>
        <p>适合人群：任何人</p>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="teacher">
      <div class="img-header">
        <img src="img/广末1.jpg" alt="" />
      </div>
      <div class="info">
        <p>体验导师：广末</p>
        <p class="star">
          <span>级别:</span><img src="img/星星 拷贝.jpg" alt="" />
          <img src="img/星星 拷贝.jpg" alt="" />
          <img src="img/星星 拷贝.jpg" alt="" />
          <img src="img/星星 拷贝.jpg" alt="" />
          <img src="img/星星 拷贝.jpg" alt="" />
        </p>
      </div>
    </div>
    <div class="title">
      <img src="img/房间.png" />
      <span>环境：</span>
    </div>
    <div class="img">
      <img src="img/矢量智能对象.png" alt="" />
    </div>
    <div class="title">
      <img src="img/工具.png" />
      <span>工具：</span>
    </div>
    <div class="info">
      <span>小量杯2个、大量杯1个、面粉400g、鸡蛋2个、蔬菜汁</span>
    </div>
    <div class="img">
      <img src="img/DSC00275.png" alt="" />
      <img src="img/图层 6 拷贝.png" alt="" />
    </div>
    <div class="title">
      <img src="img/放大镜.png" alt="" />
      <span>课程步骤：</span>
    </div>
    <div class="info">
      <p>step1:选择自己喜欢的蔬菜汁颜色进行揉面</p>
      <p>step2:擀皮并用刀切好想要的形状</p>
      <p>step3:下过烹煮，煮熟后开始享用美食</p>
    </div>
    <div class="img">
      <img src="img/图层 3.png" alt="" />
      <img src="img/DSC00482.png" alt="" />
      <img src="img/DSC00862.png" alt="" />
      <img src="img/DSC00787.png" alt="" />
    </div>
    <div class="title">
      <img src="img/right-1.png" alt="" />
      <span>成品效果：</span>
    </div>
    <div class="img"><img src="img/DSC00680.png" alt="" /></div>
  </div>
  <div class="foot">
    <div class="hr"></div>
    <div class="span">intable</div>
    <div class="hr"></div>
  </div>
</body>

</html>